<!--
 * @Description: 设置商品标签弹窗(代码为原商品列表拷贝)
 * @Author: liyujie
 * @Date: 2021/07/27
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/27
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="打标签"
            :visible.sync="dialogVisible"
            width="980px"
            :close-on-click-modal="false"
        >
            <div class="content-dialog">
                <el-select
                    v-model="label"
                    filterable
                    placeholder="创建或者搜索标签"
                    class="label-input"
                    :allow-create="true"
                    default-first-option
                    @change="handleLabelSelect"
                    @focus="fnClearLabel"
                    ref="labelClear"
                    @keyup.native.enter="handleLabelEnter"
                >
                    <el-option
                        v-for="item in restaurants"
                        :key="item.tag_no"
                        :label="item.name"
                        :value="item"
                    />
                </el-select>
                <div class="label">
                    <el-tag
                        v-for="(tag,index) in labelList"
                        :key="index"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag,index)"
                    >
                        {{ tag }}
                    </el-tag>
                </div>
                <div class="label-default">
                    <div
                        v-for="(item,index) in defaultLabel"
                        :key="index"
                    >
                        <div
                            class="label-cont"
                            v-if="item['tag_list'].length"
                        >
                            <p class="label-title">{{ item.group_name }}</p>
                            <p
                                class="label-refresh"
                                @click="fnlabelRefresh(item.group_no)"
                            >
                                <i class="el-icon-refresh-right"/>
                                <span style="margin-right:15px">换一批</span>
                            </p>
                        </div>
                        <el-tag
                            v-for="(tag,idx) in item['tag_list']"
                            :key="idx"
                            type="info"
                            :disable-transitions="false"
                            @click="fnGetLabel(tag)"
                        >
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </div>
                <p
                    class="label-tips"
                    v-if="isLabel"
                >暂无内容</p>
            </div>
            <div class="dialog-footer">
                <el-button
                    size="medium"
                    style="width: 120px"
                    @click="fnLabelCancel"
                >
                    取消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 52px"
                    @click="submitFormMerge"
                >
                    确定
                </el-button>
            </div>
        </el-dialog>
        <!-- 新建标签弹窗 -->
        <el-dialog
            :visible.sync="centerDialogVisible"
            width="660px"
            height="400px !important"
            center
        >
            <el-form
                :model="ruleFormLabel"
                :rules="rulesLabel"
                ref="ruleFormLabel"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item
                    label="选择类型"
                    prop="type"
                >
                    <el-button
                        :type="ruleFormLabel['type'] == 1 ? 'primary' : '' "
                        size="small"
                        class="header-label"
                        :disabled="true"
                        @click="fnSelectType('user')"
                    >用户</el-button>
                    <el-button
                        :type="ruleFormLabel['type'] == 1 ? '' : 'primary' "
                        size="small"
                        class="header-label"
                        @click="fnSelectType('shop')"
                    >商品</el-button>
                </el-form-item>
                <el-form-item
                    label="选择分类"
                    prop="label"
                    ref='labelType'
                >
                    <el-select
                        v-model="ruleFormLabel.label"
                        filterable
                        placeholder="请选择"
                        @change="handleSelectLabel"
                        :style="{width:'100%'}"
                    >
                        <el-option
                            v-for="item in ificationLabelList"
                            :key="item.group_no"
                            :label="item.name"
                            :value="item.group_no"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item
                    label="新建标签"
                    prop="tag"
                >
                    <el-input
                        v-model="ruleFormLabel.tag"
                        size="small"
                    />
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    size="small"
                    @click="centerDialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    @click="submitFormLabel('ruleFormLabel')">保 存</el-button>
            </span>
        </el-dialog>
        <!-- 新建/编辑弹窗 -->
    </section>
</template>

<script>
export default {
    name: "SetGoodsTags",
    data() {
        return {
            dialogVisible: false,
            target_no: '',
            isLabel: true,
            restaurantsLabel: [],
            label: '',
            restaurants: [],
            labelList: [],
            labelTagList: [],
            ificationLabelList: [],
            searchLabelList: [],
            defaultLabel: [],
            centerDialogVisible: false,
            ruleFormLabel: {
                type: 2,
                label: '',
                tag: ''
            },
            rulesLabel: {
                label: [
                    { required: true, message: '请选择分类,不可以为空', trigger: 'blur' }
                ],
                tag: [
                    { required: true, message: '请填写标签,不可以为空', trigger: 'blur' }
                ]
            },
        };
    },
    watch: {
        centerDialogVisible (val) {
            if (!val) {
                this.ruleFormLabel = {
                    type: 1,
                    label: '',
                    tag: ''
                };
            }
        },
        dialogVisible (val) {
            if (!val) {
                this.labelList = [];
                this.labelTagList = [];
                this.label = '';
            }
        }
    },
    computed: {},
    filters: {},
    mounted() {
        this.fnLabelList();
    },
    methods: {
        /**
         * 显示弹窗
         */
        show(goods_no) {
            this.target_no = goods_no;
            this.restaurants = [];
            this.dialogVisible = true;
            this.fnGetDefaultLabel('');
            this.fnGetLabelList();
        },

        /**
         * 显示弹窗
         */
        close() {
            this.dialogVisible = false;
        },

        /**
         * 获取标签列表/筛选
         */
        fnLabelList () {
            this.$post('/student/tag%5Cget_simple_list', {
                target_type: 2,
                keyword: '',
                group_no: ''
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        this.restaurants = resp.data.list;
                    }
                }
            });
        },

        /**
         * 获取被打标签
         */
        fnGetLabelList () {
            this.$post('/student/tag%5Cget_item_tag_list', {
                target_type: 2,
                target_no: this.target_no
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        resp.data.list.map(item=>{
                            this.labelList.push(item.name);
                            this.labelTagList.push({
                                name: item.name,
                                tag_no: item.tag_no
                            });
                        });
                    }
                }
            });
        },

        /**
         * 获取默认推荐标签/换一批
         */
        fnGetDefaultLabel (group_no) {
            this.$post('/student/tag%5Cget_simple_group_tag_list', {
                target_type: 2,
                group_tag_count: 20,
                group_no: group_no
            }, resp => {
                if (resp.code == 1 && resp.data.list.length > 0) {
                    this.isLabel = false;
                    if (group_no == '') { //默认
                        this.defaultLabel = resp.data.list;
                    } else if (group_no !== '') { //刷新数据用
                        this.defaultLabel.map((item,index)=>{
                            if(item.group_no == group_no) {
                                this.defaultLabel.splice(index, 1, resp.data.list[0]);
                            }
                        });
                    }
                }
            });
        },

        /**
         * 换一批
         */
        fnlabelRefresh (item) {
            this.fnGetDefaultLabel(item);
        },
        fnClearLabel () {
            this.label = '';
        },

        //选择联想数据，打标签
        handleLabelSelect(item) {
            if (typeof(item) == 'object') {
                this.labelTagList.push(this.label);
                this.label = this.label.name;
                this.labelList.push(this.label);
                setTimeout(()=>{
                    this.$refs.labelClear.blur();
                },30);
            } else {
                this.label = item;
            }
        },

        //回车创建新标签
        handleLabelEnter (e) {

            if (this.label.length > 0) {
                this.ruleFormLabel.tag = this.label;
                this.centerDialogVisible = !this.centerDialogVisible;
                this.fnSelectType('shop');
            } else {
                return;
            }
        },

        /**
         * 确定添加商品标签
         */
        submitFormMerge() {
            let str = '';

            if (this.labelTagList.length > 0) {
                this.labelTagList.map(item=>{
                    str += item.tag_no + ',';
                });
                this.$post('/student/tag%5Cclear_and_set_item_tag',{
                    target_type: 2,
                    tag_nos: str,
                    target_no: this.target_no
                },resp=> {
                    if(resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.dialogVisible = !this.dialogVisible;
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            } else {
                this.$post('/student/tag%5Cclear_and_set_item_tag',{
                    target_type: 2,
                    tag_nos: '',
                    target_no: this.target_no
                },resp=> {
                    if(resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.dialogVisible = !this.dialogVisible;
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }
        },

        fnBeforeColse (done) {
            this.fnLabelCancel();
        },

        /**
         * 取消打标签
         */
        fnLabelCancel () {
            this.$confirm('是否取消?', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.dialogVisible = !this.dialogVisible;
            });
        },

        /**
         * 删除标签
         */
        handleClose (tag,index) {
            this.labelList.splice(this.labelList.indexOf(tag), 1);
            this.labelTagList.splice(this.labelList.indexOf(tag), 1);
        },

        /**
         * 点击添加标签
         */
        fnGetLabel (tag) {
            this.labelList.push(tag.name);
            this.labelTagList.push(tag);
        },

        /**
         * 选择类型
         */
        fnSelectType (type) {
            if (type == 'shop') {
                this.ruleFormLabel.type = 2;
                this.restaurantsLabel = [];
                this.fnSearchLabel();
            }
        },
        handleSelectLabel(item) {
            this.ruleFormLabel.label = item;
        },

        /**
         * 获取分组数据
         */
        fnSearchLabel () {
            this.$post('/student/tag_group%5Cget_simple_list', {
                target_type: this.ruleFormLabel.type,
                keyword: this.ruleFormLabel.label
            }, resp=> {
                if (resp.code == 1) {
                    if (resp.data.list.length > 0) {
                        this.ificationLabelList = resp.data.list;
                    }
                } else if (resp.code == 0) {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 弹窗保存新增标签
         */
        submitFormLabel(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$post('/student/tag%5Cadd', {
                        target_type: 2,
                        group_no: this.ruleFormLabel.label,
                        name: this.ruleFormLabel.tag
                    }, resp => {
                        if (resp.code == 1) {
                            this.$message({
                                type: 'success',
                                message: '添加成功'
                            });

                            let label = {
                                name: this.ruleFormLabel.tag,
                                tag_no: resp.data['tag_no']
                            };

                            this.fnGetDefaultLabel('');
                            this.labelTagList.push(label);
                            this.label = this.ruleFormLabel.tag;
                            this.labelList.push(label.name);
                            this.centerDialogVisible = !this.centerDialogVisible;
                        } else if (resp.code == 0) {
                            this.$message({
                                type: 'warning',
                                message: resp.msg
                            });
                        }
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

    }
};
</script>

<style scoped lang="less">
.wrapper {
    //打标签
    .content-dialog {
        padding-bottom: 30px;
        .dialog-footer {
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }
    .label-input {
        width: 100%;
        margin-top: 15px;
    }
    .label-button {
        width: 57px;
        border-left: none;
    }
    .label-searchTitle {
        display: flex;
        align-items: center;
    }
    .label {
        margin: 15px 0 0px 0;
        .el-tag {
            margin-right: 10px;
            margin-bottom: 15px;
            cursor: pointer;
        }
        .button-new-tag {
            margin-left: 10px;
            height: 24px;
            line-height: 24px;
            padding-top: 0;
            padding-bottom: 0;
        }
    }
    .label-tips {
        height: 160px;
        width: 100%;
        color: #606266;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .label-default{
        max-height: 400px;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
            border-radius: 10px;
        }
        .label-cont {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .label-title {
            font-size: 14px;
            color: #3F454B;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        .label-refresh {
            font-size: 13px;
            color: #88909C;
        }
        .el-tag {
            margin-right: 10px !important;
            margin-bottom: 15px !important;
            cursor: pointer;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }

    /* 分页 */
    .pagination-wrapper {
        padding: 12px 24px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-dialog__body {
        padding: 24px 32px;
    }
    /deep/ .el-dialog {
        margin-top: 10vh!important;
    }
}
</style>
